.track {
  --toggle-track-width: 40px;
  --toggle-track-height: 24px;
  --toggle-knob-size: 16px;
  --toggle-animation-timing: var(--cui-transitions-default);

  position: relative;
  flex: 0 0 var(--toggle-track-width);
  width: var(--toggle-track-width);
  height: var(--toggle-track-height);
  padding: 0;
  margin: 0;
  overflow: visible;
  appearance: none;
  cursor: pointer;
  outline: 0;
  background-color: var(--cui-bg-normal);
  border: 1px solid var(--cui-border-normal);
  border-radius: var(--toggle-track-height);
  transition: background-color var(--toggle-animation-timing);
}

.track:hover {
  background-color: var(--cui-bg-normal-hovered);
  border: 1px solid var(--cui-border-normal-hovered);
}

.track:active {
  background-color: var(--cui-bg-normal-pressed);
  border: 1px solid var(--cui-border-normal-pressed);
}

.track[aria-checked="true"] {
  background-color: var(--cui-bg-strong);
  border: 1px solid var(--cui-bg-strong);
}

.track[aria-checked="true"]:hover {
  background-color: var(--cui-bg-strong-hovered);
  border: 1px solid var(--cui-bg-strong-hovered);
}

.track[aria-checked="true"]:active {
  background-color: var(--cui-bg-strong-pressed);
  border: 1px solid var(--cui-bg-strong-pressed);
}

.track:disabled,
.track[disabled] {
  background-color: var(--cui-bg-normal);
  border: 1px solid var(--cui-border-subtle-disabled);
}

.track[aria-checked="true"]:disabled,
.track[aria-checked="true"][disabled] {
  background-color: var(--cui-bg-accent-strong-disabled);
  border: 1px solid transparent;
}

.knob {
  position: absolute;
  top: 50%;
  display: block;
  width: var(--toggle-knob-size);
  height: var(--toggle-knob-size);
  background-color: var(--cui-fg-placeholder);
  border-radius: var(--toggle-knob-size);
  transform: translate3d(var(--cui-spacings-bit), -50%, 0);
  transition:
    transform var(--toggle-animation-timing),
    background-color var(--toggle-animation-timing);
}

[aria-checked="true"] .knob {
  transform: translate3d(
    calc(
      var(--toggle-track-width) -
      var(--toggle-knob-size) -
      var(--cui-spacings-bit)
    ),
    -50%,
    0
  );
}

[disabled] .knob,
[data-disabled="true"] .knob {
  background-color: var(--cui-bg-subtle-disabled);
}

.track[aria-checked="true"] .knob,
.track[aria-checked="true"]:disabled .knob,
.track[aria-checked="true"][disabled] .knob {
  background-color: var(--cui-fg-on-strong);
}

.wrapper {
  display: flex;
  align-items: flex-start;
}

@media (max-width: 479px) {
  .wrapper {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.label {
  display: block;
  padding-left: var(--cui-spacings-kilo);
  font-size: var(--cui-body-m-font-size);
  font-weight: var(--cui-font-weight-regular);
  line-height: var(--cui-body-m-line-height);
  cursor: pointer;
}

@media (max-width: 479px) {
  .label {
    padding-right: var(--cui-spacings-kilo);
    padding-left: 0;
  }
}

[data-disabled="true"] .label {
  color: var(--cui-fg-normal-disabled);
}
